<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="" type="index" label="编号" align="center" width="60" />
      <el-table-column prop="nickName" label="用户名" align="center" />
      <el-table-column prop="roleName" label="角色名称" align="center" show-overflow-tooltip width="120" />
      <el-table-column prop="sex" label="性别" align="center">
        <template v-slot="scoped">
          <span v-if="scoped.row.sex == false">{{ "男" }}</span>
          <span v-else>{{ "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="provinceId" label="所在省份" align="center" width="120">
        <template #default="{ row }">
          {{ getLabelByValue1(row.provinceId) }}
        </template>
      </el-table-column>
      <el-table-column prop="cityId" label="所在市" align="center" width="120">
        <template #="{ row }">
          {{ getLabelByValue2(row.cityId) }}
        </template>
      </el-table-column>
      <el-table-column prop="countyId" label="所在县" align="center">
        <template v-slot="scoped">
          {{ getLabelByValue3(scoped.row.countyId) }}
        </template>
      </el-table-column>
      <el-table-column prop="hamletName" label="详细地址" align="center" show-overflow-tooltip width="120" />
      <el-table-column prop="createName" label="创建人" align="center" width="100" />
      <el-table-column prop="createTime" label="创建日期" align="center" show-overflow-tooltip width="120">
        <template v-slot="scoped">
          {{ moment(scoped.row.createTime).format("YYYY年MM月DD日 HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" align="center" />
      <el-table-column prop="updateTime" label="修改日期" align="center" show-overflow-tooltip width="120">
        <template v-slot="scoped">
          <span v-if="!scoped.row.updateTime"></span>
          <span v-else>{{ moment(scoped.row.updateTime).format("YYYY年MM月DD日") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="140" align="center">
        <template v-slot="scoped">
          <el-link style="margin: 0 3px;" type="danger" size="small" @click="Del(scoped.row.userId)">删除</el-link>
          <el-link style="margin: 0 3px;" type="warning" size="small"
            @click="UpDateRouter(scoped.row.userId)">修改</el-link>

        </template>
      </el-table-column>
    </el-table>
    <!-- {{ tableData }} -->
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { regionData } from "element-china-area-data";//引入
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;
// console.log(regionData)
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//添加条转
const AddRouter = () => {
  router.push("/UserCreateView")
}
//修改跳转console
const UpDateRouter = (ids: any) => {
  // console.log(ids)
  store.ccstore.UpdateUserId = ids
  router.push({
    name: 'UpdateUserView',
  });
}

//显示
const tableData = ref([])
const show = () => {
  axios.get(apiUrl+'/T5/Message/GetUser', {}).then(res => {
    tableData.value = res.data.data
    // console.log(res)
  })
  // console.log(tableData)
}

//#region 省市县显示
//储存读信息
const datas: any = reactive({
  label1: {},
  label2: {},
  label3: {},
})

// 根据 value 查找对应的 label省
const getLabelByValue1 = (value: any) => {
  datas.label1 = regionData.find(item => item.value == value);

  return datas.label1 ? datas.label1.label : '--';
};

// 根据 value 查找对应的 label市
const getLabelByValue2 = (value: any) => {

  datas.label2 = datas.label1.children.find((item: any) => item.value == value);

  return datas.label2 ? datas.label2.label : '--';
};

// 根据 value 查找对应的 label县
const getLabelByValue3 = (value: any) => {

  datas.label3 = datas.label2.children.find((item: any) => item.value == value);

  return datas.label3 ? datas.label3.label : '--';

};
//#endregion

//删除
const Del = (ids: any) => {

  ElMessageBox.confirm(
    '你确定删除吗?',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post(apiUrl+'/T5/Message/DelUser', {
        "userId": ids
      }).then(res => {
        if (res.data.code == 204) {
          ElMessage.success(res.data.msg);
        }
        show();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}


onMounted(() => {
  show();
})

</script>

<style scoped></style>